import Treeselect from "@riophae/vue-treeselect";

/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

//时间控件，官网：https://github.com/weifeiyue/vue-datepicker-local
import VueDatepickerLocal from 'vue-datepicker-local'
//分页
import pagination from 'vue-bootstrap-pagination'

const app = new Vue({
    el: '#wrapper',
    data:{
        page_params:page_params,
        cur_article:null,
        article_list:[],//文章列表
        comment_list:[],//评论列表
        box:null,
        articleSearchParams:{//评文章索参数
            keyword:'',
        },
        articlePagination: {
            total: 0,
            per_page: 10,    // required
            current_page: 1, // required
            last_page: 0,    // required
            from: 1,
            to: 12
        },
        chartSearchParams:{//表格筛选参数
            msgid:'',
            start_time:page_params.data_start_date,
            end_time:page_params.data_end_date,
        },
        paginationOptions: {
            offset: 0,
            previousText: '上一页',
            nextText: '下一页',
            alwaysShowPrevNext: true,
        }
    },
    watch: {
        article_list:function () {
            //重新设置当前文章
            this.resetCurArticle();
        },
        cur_article:function () {
            this.queryChart();
        },
    },
    mounted:function(){
        this.queryArticle();
    },
    methods: {
        resetCurArticle:function(){//重新设置当前文章
            if (!_.isEmpty(this.article_list)){
                this.cur_article = _.first(this.article_list);
            }
        },
        setCurArticle:function(index){//设置当前选中文章
            //深度拷贝
            this.cur_article = _.cloneDeep(this.article_list[index]);
        },
        queryArticle:function(){//查询文章
            let queryData = _.merge(this.articleSearchParams, {
                page: this.articlePagination.current_page,
                pageSize: this.articlePagination.per_page,
            });
            utils.ajaxGet(page_params.url_article_list, queryData,
                (response, params) => {
                    this.article_list = response.data.data;
                    this.articlePagination.total = response.data.total;
                    this.articlePagination.current_page = response.data.current_page;
                    this.articlePagination.last_page = response.data.last_page;
                }
            );
        },
        queryChart:function(){//制作表格
            let queryData = _.merge(this.chartSearchParams, {
                msgid: this.cur_article.msg_data_id + '_' + (this.cur_article.index_num + 1),
            });
            utils.ajaxGet(page_params.url_list, queryData, (response, postdata) => {
                if (response.status == 200) {
                    let chartApiData = response.data;
                    let chart1Data = {
                        labels: chartApiData.dateList,
                        datasets: [
                            {
                                label: '图文页（点击群发图文卡片进入的页面）的阅读人数',
                                backgroundColor: '#a3e1d4',
                                borderColor: "rgba(26,179,148,0.7)",
                                pointBackgroundColor: "rgba(26,179,148,1)",
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.int_page_read_count
                            },
                            {
                                label: '原文页（点击图文页“阅读原文”进入的页面）的阅读人数',
                                backgroundColor: '#b5b8cf',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.ori_page_read_count
                            },
                            {
                                label: '分享的人数',
                                backgroundColor: 'lightgreen',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.share_count
                            },
                            {
                                label: '收藏的人数',
                                backgroundColor: 'lightblue',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.add_to_fav_count
                            }
                        ]
                    };
                    let chartOptions = {
                        responsive: true
                    };
                    if (!_.isEmpty(this.chart1)){
                        this.chart1.destroy();
                    }
                    this.chart1 = new Chart($("#myChart1"), {type: 'bar', data: chart1Data, options:chartOptions});
                    let chart2Data = {
                        labels: chartApiData.dateList,
                        datasets: [
                            {
                                label: '图文页的阅读次数',
                                backgroundColor: '#a3e1d4',
                                borderColor: "rgba(26,179,148,0.7)",
                                pointBackgroundColor: "rgba(26,179,148,1)",
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.int_page_read_count
                            },
                            {
                                label: '原文页的阅读次数',
                                backgroundColor: '#b5b8cf',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.ori_page_read_count
                            },
                            {
                                label: '分享的次数',
                                backgroundColor: 'lightgreen',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.share_count
                            },
                            {
                                label: '收藏的次数',
                                backgroundColor: 'lightblue',
                                pointBorderColor: "#fff",
                                data: chartApiData.dateSet.add_to_fav_count
                            }
                        ]
                    };
                    if (!_.isEmpty(this.chart2)){
                        this.chart2.destroy();
                    }
                    this.chart2 = new Chart($("#myChart2"), {type: 'bar', data: chart2Data, options:chartOptions});
                }
            });
        },
    },
    components: {
        VueDatepickerLocal,pagination
    },
});